<template>
  <div>个人信息</div>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="say">点击</button>
  <br>
  <br>
  <button @click="changeInfo">我是李四</button>
  <!-- <h2>工作：{{job.type}}, 工资：{{job.salary}}</h2> -->
  <!-- <button @click="zhanggongzi">我要涨工资</button> -->
  <h2>团队{{job.team.teamName}}, 项目经理工资: {{job.salary}}, 下属职位：{{job.team.sub.type}}工资{{job.team.sub.salary}}</h2>
  <h2>爱好{{job.team.hobby}}</h2>
  <button @click="teamInfo">涨工资</button>
</template>

<script>
import { ref, reactive } from 'vue';
export default {
  name: 'App',
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // setup函数的两种返回值：
  // 1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
  setup(){
    // let name = "rock";   // 此时修改name，视图不更新
    // let age = 18;
    let name = ref("rock"); //  RefImpl: {xxx, value: "xxx", xxx}   getter，setter实现响应式
    let age = ref(18);
    // console.log(name) // RefImpl: {xxx, value: "xxx", xxx}
    // let job = ref({
    //   type: "前端工程师",
    //   salary: "10k"
    // })
    let job = reactive({
      type: "项目经理",
      salary: "20k",
      team: {
        teamName:"全球yy",
        hobby:['抽烟','喝酒','烫头'],
        sub:{
          type: "前端开发工程师",
          salary: "10k"
        }
      }
    })

    function say(){
      console.log(name, this.name)
      alert(`my name is ${this.name}, I am ${this.age}`)
    }

    function changeInfo(){
      this.name = "李四";
      this.age = 20
      console.log(this.name, this.age)
    }
    // function zhanggongzi(){
    //   console.log(job)  //Proxy:{type: "", salary:""}
    //   job.value.type = "高级前端工程师"
    //   this.job.salary = "18k"
    // }
    function teamInfo() {
      this.job.salary = "28k"
      this.job.team.sub.salary = "16k"
      this.job.team.hobby[0] = "开发"
    }

    return{
      name,
      age,
      say,
      changeInfo,
      job,
      // zhanggongzi
      teamInfo
    }
  }
}
</script>

<style>

</style>
